<template>
	<view class="relative" :style="{ height: commonNavHeight + 'px' }">
		<view class="nav-back-packbox flex-align-items-center" :style="{ marginTop: navTitleInfo.navTopVal + 'px' }">
			<view class="nav-back-content">
				<image v-if="isMainBack" class="main-nav-back-item" src="/static/images/public_imgs/icon-nav-home.png" mode="aspectFill" @click="gooMainFun"></image>
				<image v-else class="nav-back-item" src="/static/images/public_imgs/nav-back-icon.png" mode="aspectFill" @click="gooBackFun" />
			</view>

			<view class="nav-name-content font-hanserif-bold relative flex-all-center"
				:style="{
					color: colorStyle
				}"
			>
				<view class="truncate"> {{ title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';

	export default {
		name: 'comDetailNavigateBack',
		props: {
			title: {
				type: String,
				default: () => ''
			},
			colorStyle: {
				type: String,
				default: () => '#FFF'
			},
		},

		data() {
			return {
				navTitleInfo: {
					navHeightVal: 0, 
					navTopVal: 0,
				},
				isMainBack: false,
			};
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight;
			}
		},
		created() {
			let pages = getCurrentPages();
			let currPage = null;
			if (pages.length > 1) {
				this.isMainBack = false;
			} else {
				this.isMainBack = true;
			}

			let navMenuInfo = {};

			// #ifdef MP-WEIXIN
			navMenuInfo = uni.getMenuButtonBoundingClientRect();
			// #endif

			// #ifdef APP-PLUS
			navMenuInfo = {
				top: 0,
				height: 30,
			};
			// #endif

			// 获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					let commonNavHeight = 0;

					// #ifdef MP-WEIXIN
					commonNavHeight = navMenuInfo.top + navMenuInfo.height + (navMenuInfo.top - res.statusBarHeight) * 2;
					// #endif

					// #ifdef APP-PLUS
					navMenuInfo.top = res.statusBarHeight;
					commonNavHeight = navMenuInfo.height + res.statusBarHeight + 10;
					// #endif

					this.navTitleInfo.commonNavHeight = commonNavHeight;

					this.navTitleInfo.navTopVal = navMenuInfo.top;
					this.navTitleInfo.navHeightVal = navMenuInfo.height;

					store.commit('NAV_HEIGHT_SET_FUN', commonNavHeight);
				},
				fail: (error) => {
					console.log(error);
				}
			});
		},

		methods: {
			gooMainFun() {
				uni.redirectTo({
					url: '/pages/tabbar/tabbar'
				});
			},
			gooBackFun() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="scss">
	.nav-back-packbox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		.nav-back-content {
			width: 20%;
			padding-left: 22rpx;
			.nav-back-item {
				width: 62rpx;
				height: 40rpx;
				z-index: 100;
			}
			.main-nav-back-item {
				width: 50rpx;
				height: 48rpx;
			}
		}
		.nav-name-content {
			width: 60%;
			height: 100%;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
